<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一次作业标题第一次作业副标题第一次作业标题第一次作业 - 纸质作业</title>
    <link rel="stylesheet" href="../../css/mdui.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../fine-uploader/fine-uploader-new.css">
    <style>
        .mdui-row,
        [class*="mdui-row-"] {
            margin-right: 0;
            margin-left: 0;
        }
        
        .state-conduct {
            background-color: #2196F3 !important;
            font-size: 20px !important;
        }
        
        .type-label {
            background-color: #607D8B !important;
        }
        
        .mdui-tab a {
            min-width: 120px;
        }
        
        .desc-cansee {
            margin-bottom: 16px;
            color: rgba(0, 0, 0, .45);
            font-size: 20px;
            line-height: 28px;
        }
        
        .imgEle-cansee {
            float: right;
            width: 100%;
            max-width: 430px;
            height: 360px;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: contain;
        }
        /* homework-file样式 */
        
        .mdui-grid-tile {
            background-color: #fafafa;
        }
        
        .homework-file-card {
            border: 1px solid #dadce0;
            box-sizing: border-box;
            border-radius: 6px;
        }
        
        .homework-file-img {
            max-width: 50px;
            margin: auto;
            padding: 50px;
        }
        
        .homework-file-card a {
            overflow: hidden;
            color: #212121;
            text-decoration: none;
            vertical-align: top;
            outline: none;
        }
        /* 进度条样式 */
        
        .stepper-horizontal {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding-inline-start: 0px;
        }
        
        .stepper-horizontal li {
            -webkit-transition: .5s;
            -o-transition: .5s;
            transition: .5s;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            position: relative
        }
        
        .stepper-horizontal li a .label {
            margin-top: .63rem
        }
        
        .stepper-horizontal li:not(:last-child):after {
            content: "";
            position: relative;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            margin: .5rem 0 0 0;
            height: 1px;
            background-color: rgba(0, 0, 0, .1)
        }
        
        .stepper-horizontal li:not(:first-child):before {
            content: "";
            position: relative;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            margin: .5rem 0 0 0;
            height: 1px;
            background-color: rgba(0, 0, 0, .1)
        }
        
        .stepper-horizontal li:hover {
            background-color: rgba(0, 0, 0, .06)
        }
        
        ul.stepper li a {
            padding: 1.5rem;
            text-align: center;
            cursor: pointer;
            text-decoration: none;
            color: #007bff;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
        }
        
        .mdui-chip-title {
            font-weight: 600;
            color: rgba(0, 0, 0, .87);
        }
        
        .circle {
            background-color: #4285f4!important;
        }
        /* 作业提交样式 */
        
        .homework-input {
            border: 1px dashed #d9d9d9;
        }
        
        .homework-input:hover {
            border-color: #40a9ff;
        }
    </style>
    <!-- 上传样式 -->
    <style>
        #trigger-upload {
            color: white;
            background-color: #00ABC7;
            font-size: 14px;
            padding: 7px 20px;
            background-image: none;
        }
        
        #fine-uploader-manual-trigger .qq-upload-button {
            margin-right: 15px;
        }
        
        #fine-uploader-manual-trigger .buttons {
            width: 36%;
        }
        
        #fine-uploader-manual-trigger .qq-uploader .qq-total-progress-bar-container {
            width: 60%;
        }
    </style>
</head>

<body class="mdui-appbar-with-toolbar mdui-color-grey-50">
    <!-- 顶部导航栏 -->
    <header>
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="./myword.html" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">arrow_back</i></a>
                <a href="../index.html" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <!-- 一个通知按钮 -->
                <a href="../Personal/notice.html">
                    <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white">
                            <i class="mdui-icon material-icons">notifications</i>
                        </span>
                </a>

                <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-menu="{target: '#login-menu'}">
                        <i class="mdui-icon material-icons">account_circle</i>
                    </span>
                <!-- 小菜单 -->
                <ul class="mdui-menu mdui-menu-cascade mdui-menu-cascade-custom" id="login-menu">
                    <li class="mdui-menu-item">
                        <div class="mdui-row mdui-valign">
                            <div class="mdui-col-md-3 mdui-m-l-3">
                                <div class="user-head-img mdui-img-circle" style="background: url(../../images/touxiang1.jpg);"></div>
                            </div>
                            <div class="mdui-col-md-7 mdui-typo">
                                <div>姓名：李老师</div>
                                <div>工号：91145</div>
                            </div>
                        </div>
                    </li>
                    <li class="mdui-divider"></li>
                    <li class="mdui-menu-item">
                        <a href="../Personal/notice.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">notifications_none</i>我的通知
                        </a>
                        <a href="../Personal/message.html" class="mdui-ripple">
                            <i class="mdui-menu-item-icon mdui-icon material-icons">chat_bubble_outline</i>我的留言
                        </a>
                        <a href="../Personal/setting.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">settings</i>设置
                        </a>
                        <a href="../../login.html" class="mdui-ripple">
                            <i class=" mdui-menu-item-icon mdui-icon material-icons">exit_to_app</i>登出
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->

    <content>
        <div class="mdui-container-fluid mdui-color-white mdui-shadow-1">
            <div class="mdui-row mdui-p-x-4 mdui-p-t-3"></div>

            <!-- 标题 -->
            <div class="mdui-row mdui-p-a-2">
                <div class="mdui-col-md-12">
                    <div class="mdui-typo">
                        <div class="mdui-typo-title"><strong>第一次作业标题第一次作业副标题第一次作业标题第一次作业</strong></div>

                    </div>
                </div>
            </div>
            <!-- 详细信息 -->
            <div class="mdui-row mdui-p-x-2">
                <div class="mdui-row-xs-3">
                    <div class="mdui-col mdui-typo">
                        <div class="mdui-typo-body-1">
                            <span>发布者：</span>
                            <span class="mdui-typo-body-1-opacity">刘老师</span>
                        </div>
                        <div class="mdui-typo-body-1">
                            <span>创建时间：</span>
                            <span class="mdui-typo-body-1-opacity">2019-4-19 21:18:43</span>
                        </div>
                        <div class="mdui-typo-body-1">
                            <span>结束时间：</span>
                            <span class="mdui-typo-body-1-opacity">2019-4-19 21:18:43</span>
                        </div>

                    </div>
                    <div class="mdui-col mdui-typo">
                        <div class="mdui-typo-body-1">
                            <span>班级：</span>
                            <span class="mdui-typo-body-1-opacity">计科1601</span>
                            <span class="mdui-typo-body-1-opacity">计科1602</span>
                        </div>
                        <div class="mdui-typo-body-1">
                            <span>类型：</span>
                            <kbd class="mdui-ripple type-label">电子作业</kbd>
                        </div>


                    </div>
                    <div class="mdui-col mdui-typo mdui-text-right">
                        <div class="mdui-col-md-3 mdui-float-right mdui-typo-body-1 mdui-text-color-black-secondary">
                            <div>作业人数</div>
                            <div class="mdui-typo-title">67</div>
                        </div>

                        <div class="mdui-col-md-3 mdui-float-right mdui-typo-body-1 mdui-text-color-black-secondary">
                            <div>状态</div>
                            <kbd class="mdui-ripple state-conduct">进行中</kbd>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 选项卡列表 -->
            <div class="mdui-row mdui-m-t-3">
                <div class="mdui-tab" mdui-tab>
                    <a href="#tab-id1" class="mdui-ripple">内容详细</a>
                    <a href="#tab-id3" class="mdui-ripple">作业批改</a>
                    <a href="#tab-id4" class="mdui-ripple">上传批改作业</a>
                </div>
            </div>


        </div>

    </content>

    <article>
        <div class="mdui-container">
            <!-- 内容详细 -->
            <div id="tab-id1">
                <!-- 作业进度 -->
                <div id="homework-require" class="mdui-color-white mdui-shadow-1 mdui-m-t-3">
                    <div class="mdui-row">
                        <div class="mdui-typo-subheading mdui-p-a-2">作业进度</div>
                        <div class="mdui-divider"></div>
                    </div>
                    <div class="mdui-row  mdui-p-a-3">
                        <div class="col-md-12">

                            <!-- Stepers Wrapper -->
                            <ul class="stepper stepper-horizontal">

                                <!-- First Step -->
                                <li class="conduct">
                                    <a href="#!">
                                        <span class="mdui-chip-icon circle">1</span>
                                        <span class="mdui-chip-title">等待提交</span>
                                    </a>

                                </li>

                                <!-- Second Step -->
                                <li class="active">
                                    <a href="#!">
                                        <span class="mdui-chip-icon">2</span>
                                        <span class="mdui-chip-title">等待批改</span>
                                    </a>

                                </li>

                                <!-- Third Step -->
                                <li class="success">
                                    <a href="#!">
                                        <span class="mdui-chip-icon">3</span>
                                        <span class="mdui-chip-title">完成作业</span>
                                    </a>
                                </li>

                            </ul>
                            <!-- /.Stepers Wrapper -->

                        </div>
                    </div>
                </div>
                <!-- 作业要求 -->
                <div id="homework-require" class="mdui-color-white mdui-shadow-1 mdui-m-t-3">
                    <div class="mdui-row">
                        <div class="mdui-typo-subheading mdui-p-a-2">作业要求</div>
                        <div class="mdui-divider"></div>
                    </div>
                    <div class="mdui-row mdui-typo mdui-p-a-3 mdui-m-y-2">
                        <p>今天完成实验报告第一章中的内容</p>
                        <p>本次模拟进行中状态，开启批改，开启解析的情况</p>
                    </div>
                </div>
                <!-- 作业文件 -->
                <div id="homework-file" class="mdui-color-white mdui-shadow-1 mdui-m-t-3">
                    <div class="mdui-row">
                        <div class="mdui-typo-subheading mdui-p-a-2">作业文件</div>
                        <div class="mdui-divider"></div>
                    </div>
                    <div class="mdui-row-md-5 mdui-p-a-3 mdui-grid-list">

                        <div class="mdui-col homework-file-card mdui-ripple  mdui-m-r-2">
                            <!-- <a href="#"> -->
                            <div class="mdui-grid-tile">
                                <img src="../../images/word.svg" class="homework-file-img" />
                                <div class="mdui-divider"></div>
                            </div>
                            <div class="mdui-row mdui-text-center">
                                <p mdui-tooltip="{content: '第一章实验报告'}">第一章实验报告</p>
                            </div>
                            <!-- </a> -->
                        </div>


                        <div class="mdui-col homework-file-card mdui-ripple mdui-m-r-2">
                            <!-- <a href="#"> -->
                            <div class="mdui-grid-tile">
                                <img src="../../images/word.svg" class="homework-file-img" />
                                <div class="mdui-divider"></div>
                            </div>
                            <div class="mdui-row mdui-text-center">
                                <p mdui-tooltip="{content: '第一章实验报告'}">第一章实验报告</p>
                            </div>
                            <!-- </a> -->
                        </div>
                    </div>
                </div>


            </div>

            <div id="tab-id3" class="mdui-m-t-3">
                <button class="mdui-btn mdui-color-indigo-accent mdui-ripple">全部下载</button>
                <table class="mdui-table mdui-table-hoverable mdui-m-t-2">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>文件名</th>
                            <th>上传人</th>
                            <th>时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>实验一 计科1601张三</td>
                            <td>张三</td>
                            <td>2019年4月14日16:12:01</td>
                            <td>
                                <button class="mdui-btn mdui-btn-icon mdui-ripple" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '删除文件', position: 'top'}"><i class="mdui-icon material-icons">delete</i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>实验一 计科1601李四</td>
                            <td>李四</td>
                            <td>2019年4月14日16:12:01</td>
                            <td>
                                <button class="mdui-btn mdui-btn-icon mdui-ripple" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '删除文件', position: 'top'}"><i class="mdui-icon material-icons">delete</i></button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>实验一 计科1601王五</td>
                            <td>王五</td>
                            <td>2019年4月14日16:12:01</td>
                            <td>
                                <button class="mdui-btn mdui-btn-icon mdui-ripple" mdui-tooltip="{content: '下载文件', position: 'top'}"><i class="mdui-icon material-icons">cloud_download</i></button>
                                <button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '删除文件', position: 'top'}"><i class="mdui-icon material-icons">delete</i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div id="tab-id4" class="mdui-m-t-3">
                <!-- 作业提交按钮 -->
                <script src="../../fine-uploader/fine-uploader.js"></script>
                <script type="text/template" id="qq-template-manual-trigger">
                    <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="可拖动文件进行上传">
                        <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
                        </div>
                        <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                            <span class="qq-upload-drop-area-text-selector"></span>
                        </div>
                        <div class="buttons">
                            <div class="qq-upload-button-selector qq-upload-button">
                                <div>选择文件</div>
                            </div>
                            <button type="button" id="trigger-upload" class="btn btn-primary">
                                <i class="icon-upload icon-white"></i> 上传
                            </button>
                        </div>
                        <span class="qq-drop-processing-selector qq-drop-processing">
                            <span>Processing dropped files...</span>
                        <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
                        </span>
                        <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">
                            <li>
                                <div class="qq-progress-bar-container-selector">
                                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                                </div>
                                <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                                <img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
                                <span class="qq-upload-file-selector qq-upload-file"></span>
                                <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
                                <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                                <span class="qq-upload-size-selector qq-upload-size"></span>
                                <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">取消</button>
                                <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">重试</button>
                                <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">删除</button>
                                <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                            </li>
                        </ul>

                        <dialog class="qq-alert-dialog-selector">
                            <div class="qq-dialog-message-selector"></div>
                            <div class="qq-dialog-buttons">
                                <button type="button" class="qq-cancel-button-selector">关闭</button>
                            </div>
                        </dialog>

                        <dialog class="qq-confirm-dialog-selector">
                            <div class="qq-dialog-message-selector"></div>
                            <div class="qq-dialog-buttons">
                                <button type="button" class="qq-cancel-button-selector">否</button>
                                <button type="button" class="qq-ok-button-selector">是</button>
                            </div>
                        </dialog>

                        <dialog class="qq-prompt-dialog-selector">
                            <div class="qq-dialog-message-selector"></div>
                            <input type="text">
                            <div class="qq-dialog-buttons">
                                <button type="button" class="qq-cancel-button-selector">取消</button>
                                <button type="button" class="qq-ok-button-selector">好的</button>
                            </div>
                        </dialog>
                    </div>
                </script>
                <div id="fine-uploader-manual-trigger"></div>
            </div>


        </div>
    </article>



    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>


    <script src="../../js/mdui.js"></script>
    <script>
        var manualUploader = new qq.FineUploader({
            element: document.getElementById('fine-uploader-manual-trigger'),
            template: 'qq-template-manual-trigger',
            request: {
                endpoint: '/server/uploads'
            },
            thumbnails: {
                placeholders: {
                    waitingPath: '../../fine-uploader/placeholders/waiting-generic.png',
                    notAvailablePath: '../../fine-uploader/placeholders/not_available-generic.png'
                }
            },
            autoUpload: false,
            debug: true
        });

        qq(document.getElementById("trigger-upload")).attach("click", function() {
            manualUploader.uploadStoredFiles();
        });
    </script>
    <script>
        var $$ = mdui.JQ;
        $$('.homework-input').on('click', function(e) {
            document.getElementById("upload-input").click();
        });
    </script>
</body>

</html>